<!DOCTYPE html>
<html lang="utf-8">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>在线网校学习平台</title>
    <#include "./common/res.html">
</head>

<body>
<#include "./common/header.html">
<div class="f-main clearfix">
    <div class="main-course-left">
        <!-- 基础信息 - start -->
        <div class="course-info">
            <div class="course-title">${(course.name)!}</div>

            <div class="course-meta">
                <a href="${s.base}/course/video/12.html" class="learn-btn">继续学习</a>

                <div class="static-item">
                    <div class="meta">上次学到</div>
                    <div class="meta-value" title="${(curCourseSection.name)!}">${(curCourseSection.name)!}</div>
                </div>
                <div class="static-item">
                    <div class="meta">学习人数</div>
                    <div class="meta-value">${(course.studyCount)!}</div>
                </div>
                <div class="static-item">
                    <div class="meta">难度级别</div>
                    <div class="meta-value">
                        <#if course?? && course.level??>
                        <#if course.level == 1>
                        初级
                        <#elseif course.level == 2>
                        中级
                        <#else>
                        高级
                    </#if>
                </#if>
            </div>
        </div>
        <div class="static-item" style="border:none;">
            <div class="meta">课程时长</div>
            <div class="meta-value">${(course.time)!}</div>
        </div>
        <a id="collectionSpan" onclick="doCollect(${(course.id)!})" href="javascript:void(0)" class="following"
           style="float: right;margin-top:5px;">
        </a>
    </div>

    <div class="course-brief">
        ${(course.brief)!}
    </div>

    <div class="course-menu">
        <a href="javascript:void(0)">
            <span onclick="showTab(this,'courseSection')" class="menu-item cur">章节</span>
        </a>
        <a href="javascript:void(0)">
            <span onclick="showTab(this,'commentQA',0)" class="menu-item">评论</span>
        </a>
        <a href="javascript:void(0)">
            <span onclick="showTab(this,'commentQA',1)" class="menu-item">问答</span>
        </a>
    </div>
</div>
<!-- 基础信息 - end -->

<!-- 章节信息 - start -->
<div id="courseSection">
    <#if chaptSections??>
    <#list chaptSections as item>
    <div class="chapter">
        <a href="javascript:void(0);" class="js-open">
            <h3>
                <strong>
                    <div class="icon-chapter">=</div>
                    ${item.name!}</strong>
                <span class="drop-down">▼</span>
            </h3>
        </a>
        <ul class="chapter-sub">
            <#if item.sections??>
            <#list item.sections as section>
            <a href="${s.base}/course/video/${section.id!}.html">
                <li class="chapter-sub-li">
                    <i class="icon-video">▶</i>${section.name!} (${section.time!})
                </li>
            </a>
        </#list>
    </#if>
    </ul>
</div>
</#list>
</#if>

</div>
<!-- 章节信息 - end -->

<!-- 评论区 start -->
<div id="commentQA">
</div>
<!-- 评论区 end -->
</div>

<div class="main-course-right">
	<#if courseTeacher??>
    <div class="lecturer-item" style="width: 100%;">
        <#if courseTeacher.header?? && courseTeacher.header != ''>
        <img class="lecturer-uimg" src="${courseTeacher.header!}">
        <#else>
        <img class="lecturer-uimg" src="${s.base}/res/i/header.jpg">
    	</#if>
    <span class="lecturer-name">${(courseTeacher.realname)!""}</span>
    <span class="lecturer-title">${(courseTeacher.collegeName)!""} · ${(courseTeacher.education)!""}</span>
    <span class="lecturer-p">${(courseTeacher.title)!""}，${(courseTeacher.sign)!""}</span>
    <a href="javascript:void(0)" onclick="doFollow('${(courseTeacher.id!)}');">
					<span id="followSpan" class="follow-btn">
					<#if followFlag?? && followFlag>
					已关注
					<#else>
					关注+
					</#if>
        </span>
    </a>
	</div>
</#if>
<h4 class="mt-50">推荐课程</h4>
<#if recomdCourseList?? && recomdCourseList?size gt 0 >
<#list recomdCourseList as item>
<a href="${s.base}/course/learn/${item.id}.html" target="_black" class="mb-5" title="${item.name!}">
    <li class="ellipsis oc-color-hover">${item.name!}</li>
</a>
</#list>
</#if>
</div>

</div>

<#include "./common/footer.html">

<script type="text/javascript">

    $(function () {
        //实现 章节鼠标焦点 动态效果
        $('.chapter li').hover(function () {
            $(this).find('.icon-video').css('color', '#FFF');
        }, function () {
            $(this).find('.icon-video').css('color', '#777');
        });

        $('.js-open').click(function () {
            var display = $(this).parent().find('ul').css('display');
            if (display == 'none') {
                $(this).parent().find('ul').css('display', 'block');
                $(this).find('.drop-down').html('▼');
            } else {
                $(this).parent().find('ul').css('display', 'none');
                $(this).find('.drop-down').html('▲');
            }
        });

		if (SHIRO_LOGIN) {
			//判断是否已经收藏
			var courseId = ${(course.id)!}
			if (courseId) {
				var url = '${s.base}/collections/isCollection.html';
				doCollect(courseId, url);
			}
			//判断是否已经关注教师
			var followId = ${(courseTeacher.id!)};
			if (followId) {
				var url = '${s.base}/follow/isFollow.html';
				doFollow(followId, url);
			}
		}
    });

    /**
     *展示tab commentQA
     **/
    function showTab(el, divId, type) {
        $('.course-menu').find('span').each(function (i, item) {
            $(item).removeClass('cur');
        });
        $(el).addClass('cur');

        if (divId == 'courseSection') {
            $('#courseSection').show();
            $('#commentQA').hide();
        } else {
            $('#commentQA').show();
            $('#courseSection').hide();
            _queryPage(1, type);//默认加载 第 1 页
        }
    }

    /**
     *加载 课程评论 & 问答
     * courseId：课程id
     * sectionId: 章节id
     * type : 类型 0-评论；1-答疑
     */
    var _type = 0; //全局变量
    function _queryPage(pageNum, type) {
        if (type == undefined)
            type = _type;
        else
            _type = type;
        //加载评论或者QA
        if (pageNum == undefined)
            pageNum = 1;
        var courseId = ${(course.id)!};//课程id
        var url = '${s.base}/courseComment/segment.html';
        $("#commentQA").load(
            url,
            {'courseId': courseId, 'type': type, 'pageNum': pageNum},
            function () {
            }
        );
    };

    //收藏
    function doCollect(courseId, url) {
        // 如果单击收藏五角星，则收藏
        if (url == undefined) {
            url = '${s.base}/collections/doCollection.html';
        }
        //查询是否收藏
        $.ajax({
            url: url,
            type: 'POST',
            dataType: 'json',
            data: {"courseId": courseId},
            success: function (resp) {
                if (resp.errcode == 1) {//已收藏
                    $('#collectionSpan').attr('class', 'followed');
                } else if (resp.errcode == 0) {//未收藏
                    $('#collectionSpan').attr('class', 'following');
                }
            }
        });
    }

    //关注
    function doFollow(followId, url) {
        if (url == undefined) {
            url = '${s.base}/follow/doFollow.html';
        }
        $.ajax({
            url: url,
            type: 'POST',
            dataType: 'json',
            data: {"followId": followId},
            success: function (resp) {
                if (resp.errcode == 1) {
                    $('#followSpan').html('已关注');
                } else if (resp.errcode == 0) {
                    $('#followSpan').html('+关注');
                }
            }
        });
    }
</script>

</body>

</html>
